/*
 * @Date         : 2022-03-01 13:25:31
 * @LastEditors  : zu1662
 * @LastEditTime : 2022-03-03 19:44:52
 * @Description  : 字体打印组件封装
 * 
 * Copyright © 2022 by zu1662, All Rights Reserved. 
 */
import React, { useRef, useEffect } from 'react'
import { Card } from '@douyinfe/semi-ui'
import Typing from './typing'

interface TypingCardProps {
  title: string;
  source: string;
  height?: string;
  id?: string | number;
}

const TypingCard = (props: TypingCardProps) => {
  const sourceRef = useRef(null)
  const outputRef = useRef(null)
  useEffect(() => {
    const typing = new Typing({
      source: sourceRef.current,
      output: outputRef.current,
      delay: 30
    })
    typing.start()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <Card
      bordered={false}
      className="card-item"
      title={props.title}
      style={{ minHeight: props.height }}
    >
      <div
        style={{ display: 'none' }}
        ref={sourceRef}
        dangerouslySetInnerHTML={{ __html: props.source }}
      />
      <div ref={outputRef} />
    </Card>
  )
}

export default TypingCard
